<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<template>
  <div class="h-full flex flex-col">
    <div class="flex items-center overflow-x-scroll">
      <a-form :model="filterInfo" layout="inline">
        <a-form-item field="str1" label="str1">
          <a-input v-model="filterInfo.str1" placeholder="please enter str1" />
        </a-form-item>
        <a-form-item field="str2" label="str2">
          <a-input v-model="filterInfo.str2" placeholder="please enter str2" />
        </a-form-item>
        <a-form-item field="type1" label="type1">
          <a-select v-model="filterInfo.type1" placeholder="Please select type1" multiple allow-clear>
            <a-option :value="0">type-0</a-option>
            <a-option :value="1">type-1</a-option>
            <a-option :value="2">type-2</a-option>
            <a-option :value="3">type-3</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="type2" label="type2">
          <a-radio-group type="button" v-model="filterInfo.type2">
            <a-radio :value="0">type-0</a-radio>
            <a-radio :value="1">type-1</a-radio>
            <a-radio :value="2">type-2</a-radio>
            <a-radio :value="3">type-3</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="date1" label="date1">
          <a-date-picker v-model="filterInfo.date1" placeholder="Please select date1" />
        </a-form-item>
        <a-form-item field="date2" label="date2">
          <a-range-picker v-model="filterInfo.date2" show-time v-bind="_DATE_PICKER_DEFAULT" />
        </a-form-item>
      </a-form>
      <a-button @click="router.push({ path: '/often/table/add' })" status="warning" class="mr-2">新增</a-button>
      <a-button @click="getData">刷新</a-button>
    </div>
    <use-n-progress :inanimate="inDebounce" />
    <a-table
      row-key="id"
      class="!h-0 flex-1"
      :scroll="{ y: '100%', x: '100%' }"
      :pagination="pagination"
      :data="dataList"
      :virtual-list-props="{ height: '100%' }"
      :row-selection="{
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false, // false:切换页面时依旧可以选择   true:传统模式
      }"
      v-model:selectedKeys="selectedKeys"
      v-on="{ ...handlePageChange }"
    >
      <template #columns>
        <a-table-column title="ID" data-index="id" :width="100" />
        <a-table-column title="名称" data-index="name" :width="200">
          <template #cell="{ record }">
            <a-input v-model="record.name" @change="handleChangeName(record)" />
          </template>
        </a-table-column>
        <a-table-column title="内容" data-index="content" :width="100" />
        <a-table-column title="ip" data-index="ip" :width="150" />
        <a-table-column title="电话" data-index="phone" :width="150" />
        <a-table-column title="时间" data-index="time" :width="200" />
        <a-table-column title="状态" data-index="status" :width="100">
          <template #cell="{ record }">
            <a-switch
              type="round"
              :model-value="record.status"
              :checked-value="1"
              :unchecked-value="0"
              @change="handleChangeStatus(record)"
            />
          </template>
        </a-table-column>
        <a-table-column title="操作" :width="220" fixed="right" align="center">
          <template #cell="{ record }">
            <a-button
              @click="router.push({ path: '/often/table/' + record.id, query: { name: record.name } })"
              status="warning"
              class="mr-2"
            >
              编辑
            </a-button>
            <a-button @click="handleDelete([record.id])" status="danger">删除</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <use-table-select @clear="selectedKeys = []" :del="handleDelete" :keys="selectedKeys" />
  </div>
</template>

<script lang="ts" setup>
import { getLMockList, type IGetMockList } from 'api/test1'
import { remove } from 'lodash-es'

const _DATE_PICKER_DEFAULT = DATE_PICKER_DEFAULT
const router = useRouter()
const DefaultFilter = {
  str1: '',
  str2: '',
  type1: 0,
  type2: 0,
  date1: '',
  date2: [],
}

const selectedKeys = ref([])
const { dataList, filterInfo, inDebounce, pagination, handlePageChange, getData } = useGetData<
  IGetMockList,
  typeof DefaultFilter
>(getLMockList, DefaultFilter, { usePagination: false })

const handleDelete = async (ids: string[]) =>
  useConfirm()
    .then(async () => {
      await getLMockList(ids) // 模拟删除
      console.log('删除', ids)
      if (ids.length === 1) {
        remove(selectedKeys.value, (e: any) => e === ids[0])
      } else {
        selectedKeys.value = []
      }
    })
    .then(getData)

const handleChangeStatus = async (e: IGetMockList) => {
  await getLMockList({})
  e.status = Number(!e.status) as any
}

const handleChangeName = async (e: IGetMockList) => {
  await getLMockList({})
}
</script>
